<div>
    <d-panel [type]="'primary'" #panelactor [isCollapsed]="actorIsCollapsed" [showAnimation]="true">
        <d-panel-header (click)="active('Actor')">
            <em class="icon icon-select-arrow" [ngClass]="{ open: panelactor.isCollapsed }"></em> 角色/Actors

        </d-panel-header>
        <d-panel-body>
            <div dDraggable [dragScope]="'default-css'" [dragData]="{ item: item,itemtype:'actor'}" class="listitem" *ngFor="let item of store.currentStory.Actors">
                <span (click)="select(item,'actorinfo')">
                    <i class="{{ui.getIcon('actor')}}"></i> {{item.Name}}</span>
                <d-button bsStyle="text-dark" title="destiny" (click)="showDestiny(item)"><span style="font-size: x-large;vertical-align:middle;">𝅘𝅥𝅯</span>
                </d-button>
            </div>
        </d-panel-body>
    </d-panel>
    <d-panel [type]="'primary'" #panelclue [isCollapsed]="clueIsCollapsed" [showAnimation]="true">
        <d-panel-header (click)="active('Clue')">
            <em class="icon icon-select-arrow" [ngClass]="{ open: panelclue.isCollapsed }"></em> 线索/Clues

        </d-panel-header>
        <d-panel-body>
            <div dDraggable [dragScope]="'default-css'" [dragData]="{ item: item,itemtype:'clue'}" class="listitem" *ngFor="let item of store.currentStory.Clues">
                <span (click)="select(item,'clueinfo')">
                    <i class="{{ui.getIcon('clue')}}"></i> {{item.Name}}</span>
                <d-button bsStyle="text-dark" title="destiny" (click)="showDestiny(item)"><span style="font-size: x-large;vertical-align:middle;">𝅘𝅥𝅯</span>
                </d-button>
            </div>
        </d-panel-body>
    </d-panel>
    <d-panel [type]="'primary'" #panelevent [isCollapsed]="eventIsCollapsed" [showAnimation]="true">
        <d-panel-header (click)="active('Event')">
            <em class="icon icon-select-arrow" [ngClass]="{ open: panelevent.isCollapsed }"></em> 事件/Events

        </d-panel-header>
        <d-panel-body>
            <div dDraggable [dragScope]="'default-css'" [dragData]="{ item: item,itemtype:'event'}" class="listitem" *ngFor="let item of store.currentStory.Events">
                <span (click)="select(item,'eventinfo')">
                    <i class="{{ui.getIcon('event')}}"></i> {{item.Name}}</span>
                <d-button bsStyle="text-dark" title="destiny" (click)="showDestiny(item)"><span style="font-size: x-large;vertical-align:middle;">𝅘𝅥𝅯</span>
                </d-button>
            </div>
        </d-panel-body>
    </d-panel>
    <d-panel [type]="'primary'" #panelgroup [isCollapsed]="groupIsCollapsed" [showAnimation]="true">
        <d-panel-header (click)="active('Group')">
            <em class="icon icon-select-arrow" [ngClass]="{ open: panelgroup.isCollapsed }"></em> 组织/Groups

        </d-panel-header>
        <d-panel-body>
            <div dDraggable [dragScope]="'default-css'" [dragData]="{ item: item,itemtype:'group'}" class="listitem" *ngFor="let item of store.currentStory.Groups">
                <span (click)="select(item,'groupinfo')">
                    <i class="{{ui.getIcon('group')}}"></i> {{item.Name}}</span>
                <d-button bsStyle="text-dark" title="destiny" (click)="showDestiny(item)"><span style="font-size: x-large;vertical-align:middle;">𝅘𝅥𝅯</span>
                </d-button>
            </div>
        </d-panel-body>
    </d-panel>
    <d-panel [type]="'primary'" #panellocation [isCollapsed]="locationIsCollapsed" [showAnimation]="true">
        <d-panel-header (click)="active('Location')">
            <em class="icon icon-select-arrow" [ngClass]="{ open: panellocation.isCollapsed }"></em> 地点/Locations

        </d-panel-header>
        <d-panel-body>
            <div dDraggable [dragScope]="'default-css'" [dragData]="{ item: item,itemtype:'location'}" class="listitem" *ngFor="let item of store.currentStory.Locations">
                <span (click)="select(item,'locationinfo')">
                    <i class="{{ui.getIcon('location')}}"></i> {{item.Name}}</span>
                <d-button bsStyle="text-dark" title="destiny" (click)="showDestiny(item)"><span style="font-size: x-large;vertical-align:middle;">𝅘𝅥𝅯</span>
                </d-button>
            </div>
        </d-panel-body>
    </d-panel>
    <d-panel [type]="'primary'" #panelstuff [isCollapsed]="stuffIsCollapsed" [showAnimation]="true">
        <d-panel-header (click)="active('Stuff')">
            <em class="icon icon-select-arrow" [ngClass]="{ open: panelstuff.isCollapsed }"></em> 物品/Stuffs

        </d-panel-header>
        <d-panel-body>
            <div dDraggable [dragScope]="'default-css'" [dragData]="{ item: item,itemtype:'stuff'}" class="listitem" *ngFor="let item of store.currentStory.Stuffs">
                <span (click)="select(item,'stuffinfo')">
                    <i class="{{ui.getIcon('stuff')}}"></i> {{item.Name}}</span>
                <d-button bsStyle="text-dark" title="destiny" (click)="showDestiny(item)"><span style="font-size: x-large;vertical-align:middle;">𝅘𝅥𝅯</span>
                </d-button>
            </div>
        </d-panel-body>
    </d-panel>
    <d-panel [type]="'primary'" #paneltask [isCollapsed]="taskIsCollapsed" [showAnimation]="true">
        <d-panel-header (click)="active('Task')">
            <em class="icon icon-select-arrow" [ngClass]="{ open: paneltask.isCollapsed }"></em> 任务/Tasks

        </d-panel-header>
        <d-panel-body>
            <div dDraggable [dragScope]="'default-css'" [dragData]="{ item: item,itemtype:'task'}" class="listitem" *ngFor="let item of store.currentStory.Tasks">
                <span (click)="select(item,'taskinfo')">
                    <i class="{{ui.getIcon('task')}}"></i> {{item.Name}}
                </span>
                <d-button bsStyle="text-dark" title="destiny" (click)="showDestiny(item)"><span style="font-size: x-large;vertical-align:middle;">𝅘𝅥𝅯</span>
                </d-button>
            </div>
        </d-panel-body>
    </d-panel>
</div>